Bootstrap5變量配置：自定義主題色與組件樣式

本文介紹Bootstrap5通過SCSS變量配置快速自定義主題的方法，適合初學者。因CDN版本難改變量，推薦安裝Bootstrap SCSS源碼。 準備工作：安裝Bootstrap（`npm install bootstrap`），創建`scss/custom.scss`文件。 核心步驟：1. 修改主題色：導入Bootstrap的`functions`和`variables`後，自定義`$primary`等變量（如主色設爲紫色`#6c5ce7`），依賴變量的組件會自動更新，還可擴展新主題色（如`$warning`）。2. 自定義組件樣式：通過變量調整按鈕內邊距（`$btn-padding-y`）、卡片圓角（`$card-border-radius`）、導航欄背景色（`$navbar-bg`）等。 編譯：用`sass`工具編譯`custom.scss`到CSS，引入到HTML。 注意事項：變量需在導入後修改以覆蓋默認值，保持單位一致，可藉助Coolors生成協調顏色。 總結：通過變量配置，高效實現主題色和組件樣式定製，快速打造個性化頁面。